<template>
  <a-row :gutter="[12, 0]" class="px-[12px] pt-2 a-row-box">
    <a-col :span="12" class="flex h-full flex-col">
      <Card title="燃气概况" :desc="rqygk.desc" class="h-full flex flex-col">
        <template #desc>
          <div class="flex flex-row">
            <a-select
              v-model:value="rqygk.year"
              size="small"
              :options="utils.genSelectOptions('year')"
              @change="loadDataByRq(false)"
            />
            <a-select
              class="ml-1"
              v-model:value="rqygk.month"
              size="small"
              :options="utils.genSelectOptions('month')"
              @change="loadDataByRq(false)"
            />
          </div>
        </template>

        <div class="h-[52px] flex justify-around mt-[14px] cursor-pointer" @click="handleRqClick">
          <div class="text-center">
            <span class="text-md block">供气总量</span>
            <NumberAnimation
              unit="万方"
              :value="rqygk.gasSurvey.supplyGasTotal"
              :decimals="3"
              class="text-2xl font-bold block"
            />
          </div>
          <div class="text-center">
            <span class="text-md block">供气总量同比增幅</span>
            <span class="text-2xl font-bold block">
              <span class="valueNum-zf">
                {{
                  rqygk.gasSurvey.supplyGasTotalTb == '/'
                    ? rqygk.gasSurvey.supplyGasTotalTb
                    : rqygk.gasSurvey.supplyGasTotalTb.toFixed(2)
                }}
              </span>
              <span class="unit">{{ rqygk.gasSurvey.supplyGasTotalTb == '/' ? '' : '%' }}</span>
            </span>
          </div>
          <div class="text-center">
            <span class="text-md block">商业用气量</span>
            <NumberAnimation
              unit="万方"
              :value="rqygk.gasSurvey.businessUseGasVolume"
              class="text-2xl font-bold block"
            />
          </div>
          <div class="text-center">
            <span class="text-md block">商业用气量同比增幅</span>
            <span class="text-2xl font-bold block">
              <span class="valueNum-zf">
                {{
                  rqygk.gasSurvey.businessUseGasVolumeTb == '/'
                    ? rqygk.gasSurvey.businessUseGasVolumeTb
                    : rqygk.gasSurvey.businessUseGasVolumeTb.toFixed(2)
                }}
              </span>
              <span class="unit">{{
                rqygk.gasSurvey.businessUseGasVolumeTb == '/' ? '' : '%'
              }}</span>
            </span>
          </div>
        </div>

        <div class="flex flex-row mt-[14px] pb-[14px]" style="height: calc(100% - 52px - 12px)">
          <div class="w-full h-full flex flex-col">
            <div class="w-full h-1/3 mx-auto">
              <div class="text-[14px] font-bold mt-[22px] text-center mb-[4px]">
                燃气用气性质比例
              </div>

              <div class="gas-usage">
                <div class="usage-item commercial">
                  <div class="usage-content">
                    <div class="usage-type">商业用气</div>
                    <div class="usage-number">{{ rqyqxzblOptions.series[0].data[0].value }}</div>
                    <div class="usage-percentage">{{ rqygk.chart.commercialPercent }}%</div>
                  </div>
                </div>

                <div class="usage-item residential">
                  <div class="usage-content">
                    <div class="usage-type">居民用气</div>
                    <div class="usage-number">{{ rqyqxzblOptions.series[0].data[1].value }}</div>
                    <div class="usage-percentage">{{ rqygk.chart.residentialPercent }}%</div>
                  </div>
                </div>
              </div>

              <div class="legend">
                <div class="legend-item">
                  <div class="legend-color commercial-color"></div>
                  <span>商业用气 ({{ rqyqxzblOptions.series[0].data[0].value }})</span>
                </div>
                <div class="legend-item">
                  <div class="legend-color residential-color"></div>
                  <span>居民用气 ({{ rqyqxzblOptions.series[0].data[1].value }})</span>
                </div>
              </div>
            </div>
            <div id="rqyql" class="w-full h-2/3 mx-auto my-[14px]"></div>
            <div id="syrqyql" class="w-full h-2/3 mx-auto my-[14px]"></div>
          </div>

          <div v-if="false" class="w-1/2 flex flex-col">
            <p class="text-[14px] font-bold mt-[22px] text-gray-300 text-center mb-[4px]">
              {{ rqygk.year ? `${rqygk.year}年` : '' }}商业用气量排名（TOP20）
            </p>

            <!-- 设置表格容器的固定高度，并添加 overflow 属性 -->
            <div class="custom-table w-full h-full mt-[14px] mb-[14px] flex flex-col relative">
              <!-- 表头 -->
              <div class="custom-table-header sticky top-0 z-2">
                <div class="custom-table-cell w-[50px]" style="flex: none">排名</div>
                <div class="custom-table-cell pl-1">单位名称</div>
                <div class="custom-table-cell w-[100px]" style="flex: none">用气量(万方)</div>
                <div class="custom-table-cell w-[80px]" style="flex: none">较上年</div>
                <div class="w-[9px] border-none"></div>
              </div>

              <!-- 表格内容 -->
              <div class="custom-table-body flex-1 overflow-y-auto no-scrollbar">
                <div v-for="(item, index) in gasRankingData" :key="index" class="custom-table-row">
                  <div class="custom-table-cell w-[50px]" style="flex: none">{{ index + 1 }}</div>
                  <div
                    class="custom-table-cell text-xs pl-1"
                    style="text-align: left; justify-content: flex-start"
                  >
                    {{ item.deptName }}
                  </div>
                  <div class="custom-table-cell w-[100px]" style="flex: none">
                    {{
                      Number(item.yearUseGasVolume)
                        .toFixed(3)
                        .replace(/\.?0+$/, '')
                    }}
                  </div>
                  <div
                    class="custom-table-cell w-[80px]"
                    style="flex: none"
                    :class="item.change >= 0 ? 'text-green-500' : 'text-red-500'"
                  >
                    {{ item.change >= 0 ? '+' : '' }}{{ item.change }}%
                  </div>
                </div>
              </div>

              <div
                class="absolute bottom-0 left-0 right-0 h-[60px]"
                style="background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))"
              ></div>
            </div>
          </div>
        </div>
      </Card>
    </a-col>

    <a-col :span="12" class="flex h-full flex-col">
      <Card title="电力概况" :desc="dlgk.desc" class="h-full flex flex-col">
        <template #desc>
          <div class="flex flex-row">
            <a-select
              v-model:value="dlgk.year"
              size="small"
              :options="utils.genSelectOptions('year')"
              @change="loadDataByDl(false)"
            />
            <a-select
              class="ml-1"
              v-model:value="dlgk.month"
              size="small"
              :options="utils.genSelectOptions('month')"
              @change="loadDataByDl(false)"
            />
          </div>
        </template>

        <div class="h-[52px] flex justify-around mt-[14px] cursor-pointer" @click="handleDlClick">
          <div class="text-center">
            <span class="text-md block">售电总量</span>
            <NumberAnimation
              :value="dlgk.survey.sellingElectricityTotal"
              unit="kWh"
              class="text-2xl font-bold block"
            >
              <template #suffix></template>
            </NumberAnimation>
          </div>

          <div class="text-center">
            <span class="text-md block">居民售电量</span>
            <NumberAnimation
              :value="dlgk.survey.jmElectricityTotal"
              unit="kWh"
              class="text-2xl font-bold block"
            >
              <template #suffix></template>
            </NumberAnimation>
          </div>

          <div class="text-center">
            <span class="text-md block">商业售电量</span>
            <NumberAnimation
              :value="dlgk.survey.syElectricityTotal"
              unit="kWh"
              class="text-2xl font-bold block"
            >
              <template #suffix></template>
            </NumberAnimation>
          </div>

          <div class="text-center">
            <span class="text-md block">工业售电量</span>
            <NumberAnimation
              :value="dlgk.survey.gyElectricityTotal"
              unit="kWh"
              class="text-2xl font-bold block"
            >
              <template #suffix></template>
            </NumberAnimation>
          </div>
        </div>

        <div class="h-[52px] flex justify-around mt-[14px] cursor-pointer" @click="handleDlClick">
          <div class="text-center">
            <span class="text-md block">售电总量同比增幅</span>
            <span class="text-2xl font-bold block">
              <span class="valueNum-zf">
                {{
                  dlgk.survey.sellingElectricityTotalTb
                    ? dlgk.survey.sellingElectricityTotalTb.toFixed(2)
                    : '/'
                }}
              </span>
              <span class="unit"> {{ dlgk.survey.sellingElectricityTotalTb ? '%' : '' }}</span>
            </span>
          </div>

          <div class="text-center">
            <span class="text-md block">居民售电量同比增幅</span>
            <span class="text-2xl font-bold block">
              <span class="valueNum-zf">
                {{
                  dlgk.survey.jmElectricityTotalTb
                    ? dlgk.survey.jmElectricityTotalTb.toFixed(2)
                    : '/'
                }}
              </span>
              <span class="unit"> {{ dlgk.survey.jmElectricityTotalTb ? '%' : '' }}</span>
            </span>
          </div>

          <div class="text-center">
            <span class="text-md block">商业售电量同比增幅</span>
            <span class="text-2xl font-bold block">
              <span class="valueNum-zf">
                {{
                  dlgk.survey.syElectricityTotalTb
                    ? dlgk.survey.syElectricityTotalTb.toFixed(2)
                    : '/'
                }}
              </span>
              <span class="unit"> {{ dlgk.survey.syElectricityTotalTb ? '%' : '' }}</span>
            </span>
          </div>

          <div class="text-center">
            <span class="text-md block">工业售电量同比增幅</span>
            <span class="text-2xl font-bold block">
              <span class="valueNum-zf">
                {{
                  dlgk.survey.gyElectricityTotalTb
                    ? dlgk.survey.gyElectricityTotalTb.toFixed(2)
                    : '/'
                }}
              </span>
              <span class="unit"> {{ dlgk.survey.gyElectricityTotalTb ? '%' : '' }}</span>
            </span>
          </div>
        </div>

        <!--          <div class="h-[52px] flex justify-around mt-[14px] cursor-pointer" @click="handleDlClick">
            <div class="text-center">
              <span class="text-md block">购电总量(kWh)</span>
              <NumberAnimation :value="utils.formatToWanNum(dlgk.survey.purchaseElectricityTotal)"
                class="text-2xl font-bold block">
                <template #suffix>万</template>
              </NumberAnimation>
            </div>
            <div class="text-center">
              <span class="text-md block">供电总量(kWh)</span>
              <NumberAnimation :value="utils.formatToWanNum(dlgk.survey.powerSupplyTotal)"
                class="text-2xl font-bold block">
                <template #suffix>万</template>
              </NumberAnimation>
            </div>
            <div class="text-center">
              <span class="text-md block">售电总量(kWh)</span>
              <NumberAnimation :value="utils.formatToWanNum(dlgk.survey.sellingElectricityTotal)"
                class="text-2xl font-bold block">
                <template #suffix>万</template>
              </NumberAnimation>
            </div>
          </div>-->

        <div
          class="h-full flex flex-col mt-[24px] pb-[14px]"
          style="height: calc(100% - 104px - 52px - 36px - 12px)"
        >
          <!--            <div class="text-[16px] font-bold text-[#fff] mt-[22px] text-center mb-[4px]">
              电力用户数性质占比
            </div>

            <div class="bar-chart">
              <div class="bar-container" id="barContainer">
                &lt;!&ndash; Bar segments will be dynamically added &ndash;&gt;
              </div>

              <div class="data-items" id="dataItems">
                &lt;!&ndash; Data items will be dynamically added &ndash;&gt;
              </div>
            </div>-->

          <div class="text-[16px] font-bold mt-[22px] text-center mb-[4px]">电力售电量性质占比</div>

          <div class="bar-chart">
            <div class="bar-container" id="barContainer2">
              <!-- Bar segments will be dynamically added -->
            </div>

            <div class="data-items" id="dataItems2">
              <!-- Data items will be dynamically added -->
            </div>
          </div>

          <div class="w-full flex-1 flex flex-row">
            <div id="dlgdlBuy" class="w-[50%] h-full"></div>
            <div id="dlgdlProvider" class="w-[50%] h-full"></div>
          </div>

          <div v-if="false" class="w-1/2 flex flex-col">
            <div id="dlsdlxzzb" class="w-full h-1/2 pr-[15%]"></div>

            <div v-if="false" class="h-2/3 flex flex-col">
              <span class="text-[14px] font-bold mt-[22px] text-gray-300 text-center mb-[4px]">
                {{ dlgk.year ? `${dlgk.year}年` : '' }}商业售电排名（TOP20）
              </span>

              <!-- 设置表格容器的固定高度，并添加 overflow 属性 -->
              <div class="custom-table w-full h-full mt-[14px] mb-[14px] flex flex-col relative">
                <!-- 表头 -->
                <div class="custom-table-header sticky top-0 z-2">
                  <div class="custom-table-cell w-[50px]" style="flex: none">排名</div>
                  <div class="custom-table-cell pl-1">单位名称</div>
                  <div class="custom-table-cell w-[100px]" style="flex: none">售电量(kWh)</div>
                  <div class="custom-table-cell w-[80px]" style="flex: none">较上年</div>
                  <div class="w-[9px] border-none"></div>
                </div>

                <!-- 表格内容 -->
                <div
                  class="custom-table-body flex-1 overflow-y-auto no-scrollbar"
                  style="max-height: calc(100% - 40px)"
                >
                  <div
                    v-for="(item, index) in gasRanking2Data"
                    :key="index"
                    class="custom-table-row"
                  >
                    <div class="custom-table-cell w-[50px]" style="flex: none">
                      {{ index + 1 }}
                    </div>
                    <div
                      class="custom-table-cell text-xs pl-1"
                      style="text-align: left; justify-content: flex-start"
                    >
                      {{ item.deptName }}
                    </div>
                    <div class="custom-table-cell w-[100px]" style="flex: none">
                      {{ utils.formatToWan(item.yearElectricitySales) }}
                    </div>
                    <div
                      class="custom-table-cell w-[80px]"
                      style="flex: none"
                      :class="item.change >= 0 ? 'text-green-500' : 'text-red-500'"
                    >
                      {{ item.change >= 0 ? '+' : '' }}{{ item.change }}%
                    </div>
                  </div>
                  <!-- 添加渐变蒙层 -->
                </div>
                <div
                  class="absolute bottom-0 left-0 right-0 h-[60px]"
                  style="
                    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
                  "
                ></div>
              </div>
            </div>
          </div>
        </div>
      </Card>
    </a-col>
  </a-row>
  <DlModal ref="dlModalRef" />
  <RqModal ref="rqModalRef" />
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import Card from './card.vue'
import * as echarts from 'echarts'

import * as utils from '../utils'
import { useBigScreenStore } from '../store'
import { Apis } from '@/api'
import Select from './select.vue'

import NumberAnimation from '@/components/number-animation.vue'

import DlModal from '../modal/energy/dl-modal.vue'
import RqModal from '../modal/energy/rq-modal.vue'
const emit = defineEmits(['mounted'])

const bigScreenStore = useBigScreenStore()

const dlModalRef = ref<InstanceType<typeof DlModal>>()
const rqModalRef = ref<InstanceType<typeof RqModal>>()

const gasRankingData = ref([])

const gasRanking2Data = ref([])

// 燃气概况
const rqygk = reactive({
  desc: '',
  year: '',
  month: '',
  lastYear: 2024,
  lastQuarter: 3,
  childCount: 0,
  yearCount: 0,
  lastYearCount: 0,
  year2yearRate: 0,
  gasSurvey: {
    residentNum: 0,
    businessNum: 0,
    productionTotal: 0,
    supplyGasTotal: 0,
    businessUseGasVolume: 0,
    businessUseGasVolumeTb: '/',
    residentUseGasVolume: 0,
    residentUseGasVolumeTb: '/',
    supplyGasTotalTb: '/',
  },
  // 季度
  years: [
    {
      // 年份
      year: '2023',
      // 当前第几季度
      quarter: '一',
      // 当前季度数量
      boyCount: '325',
      girlCount: '318',
    },
    {
      year: '2023',
      quarter: '二',
      boyCount: '342',
      girlCount: '335',
    },
    {
      year: '2023',
      quarter: '三',
      boyCount: '338',
      girlCount: '342',
    },
    {
      year: '2023',
      quarter: '四',
      boyCount: '356',
      girlCount: '349',
    },
    {
      year: '2024',
      quarter: '一',
      boyCount: '345',
      girlCount: '338',
    },
    {
      year: '2024',
      quarter: '二',
      boyCount: '358',
      girlCount: '352',
    },
    {
      year: '2024',
      quarter: '三',
      boyCount: '352',
      girlCount: '351',
    },
    {
      year: '2024',
      quarter: '四',
      boyCount: '368',
      girlCount: '359',
    },
  ],
  chart: {
    commercialPercent: '',
    residentialPercent: '',
  },
})

// 燃气用气性质比例
const rqyqxzblOptions = reactive({
  title: {
    text: '燃气用气性质比例',
    left: 'center',
    top: '5%',
    textStyle: {
      fontSize: 14,
    },
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderColor: 'rgba(255,255,255,0.3)',
    textStyle: {
      fontSize: 14,
    },
    formatter: function (params: any[]) {
      return (
        params[0].name +
        '<br/>' +
        params
          .map((item) => {
            return `${item.marker} ${item.seriesName}: ${item.value}`
          })
          .join('<br/>')
      )
    },
  },
  legend: {
    show: true,
    orient: 'horizontal',
    bottom: '5%',
    itemGap: 3, // 减小图例间距
    itemWidth: 10, // 减小图例标记的宽度
    itemHeight: 10, // 减小图例标记的高度
    textStyle: {
      fontSize: 12, // 减小图例文字大小
    },
  },
  series: [
    {
      name: '用气性质比例',
      type: 'pie',
      radius: '45%',
      data: [
        { value: 0, name: '商业用气' },
        { value: 0, name: '居民用气' },
      ],
      label: {
        show: true,
        formatter: function (params) {
          // 格式化标签为：序号. 名称 (值)
          return `${params.name} (${params.value},${params.percent}%)`
        },
      },
      labelLine: {
        show: true,
        length: 4, // 第一段指示线长度
        length2: 4, // 第二段指示线长度
        smooth: true, // 指示线平滑
      },
      color: ['#4282ff', '#37e0cc'],
    },
  ],
})

// 供气总量
const rqyqlOptions = reactive({
  title: {
    text: '供气总量',
    left: 'center',
    top: '10%',
    textStyle: {
      fontSize: 16,
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
    data: ['2024年', '2023年'],
  },
  xAxis: {
    type: 'category',
    data: utils.genMonthArray(),
    axisLabel: {
      fontSize: 12,
    },
  },
  yAxis: {
    type: 'value',
    name: '万方',
    nameLocation: 'end',
    axisLabel: {
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  grid: {
    top: '20%',
    left: '6%',
    right: '6%',
    bottom: '15%',
    containLabel: true,
  },
  series: [],
})

// 供气总量
const syrqyqlOptions = reactive({
  title: {
    text: '商业用气量',
    left: 'center',
    top: '10%',
    textStyle: {
      fontSize: 16,
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '0%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
    data: ['2024年', '2023年'],
  },
  xAxis: {
    type: 'category',
    data: utils.genMonthArray(),
    axisLabel: {
      fontSize: 12,
    },
  },
  yAxis: {
    type: 'value',
    name: '万方',
    nameLocation: 'end',
    axisLabel: {
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  grid: {
    top: '20%',
    left: '6%',
    right: '6%',
    bottom: '15%',
    containLabel: true,
  },
  series: [],
})

// 电力概况
const dlgk = reactive({
  desc: '',
  year: '',
  month: '',
  lastYear: 2024,
  lastQuarter: 3,
  childCount: 0,
  survey: {
    businessNum: 0,
    residentNum: 0,
    powerSupplyTotal: 0,
    industryNum: 0,
    /** 农排用户数 */
    agriculturalDrainageNum: 0,
    sellingElectricityTotal: 0,
    purchaseElectricityTotal: 0,
    electricHeatingNum: 0,
    electricityUsageTotal: 0,
    /** 农排售电量 */
    nyElectricityTotal: 0,
    /** 居民售电量 */
    jmElectricityTotal: 0,
    /** 工业售电量 */
    gyElectricityTotal: 0,
    /** 商业售电量 */
    syElectricityTotal: 0,
    sellingElectricityTotalTb: 0,
    jmElectricityTotalTb: 0,
    gyElectricityTotalTb: 0,
    syElectricityTotalTb: 0,
  },
  // 活跃用户数
  activeUsers: '452000',
  // 话务量
  calls: '523000',
  // 流入用户
  inflow: '386000',
  // 流出用户
  outflow: '354000',
  // 月度数据
  months: [
    { month: '2023-01', count: '452000' },
    { month: '2023-02', count: '386000' },
    { month: '2023-03', count: '425000' },
    { month: '2023-04', count: '356000' },
    { month: '2023-05', count: '478000' },
    { month: '2023-06', count: '523000' },
    { month: '2023-07', count: '468000' },
    { month: '2023-08', count: '512000' },
    { month: '2023-09', count: '435000' },
    { month: '2023-10', count: '389000' },
    { month: '2023-11', count: '456000' },
    { month: '2023-12', count: '498000' },
    { month: '2024-01', count: '465000' },
    { month: '2024-02', count: '398000' },
    { month: '2024-03', count: '445000' },
    { month: '2024-04', count: '512000' },
    { month: '2024-05', count: '478000' },
    { month: '2024-06', count: '534000' },
    { month: '2024-07', count: '489000' },
    { month: '2024-08', count: '523000' },
    { month: '2024-09', count: '467000' },
    { month: '2024-10', count: '498000' },
  ],
})

// 电力购电量数据
const dlgdlBuyOptions = reactive({
  title: {
    text: '售电总量',
    left: 'center',
    top: '5%',
    textStyle: {
      fontSize: 16,
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '5%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
    data: ['2024年', '2023年'],
  },
  xAxis: {
    type: 'category',
    data: utils.genMonthArray(),
    axisLabel: {
      fontSize: 12,
    },
  },
  yAxis: {
    type: 'value',
    name: '万kWh',
    nameLocation: 'end',
    axisLabel: {
      fontSize: 12,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  grid: {
    top: '20%',
    left: '6%',
    right: '6%',
    bottom: '15%',
    containLabel: true,
  },
  series: [
    {
      name: '2024年',
      data: [1920, 1932, 1601, 1934, 1290, 1330, 1920, 2120, 1200, 2150, 2380, 970],
      type: 'line',
      radius: '100%',
      smooth: true,
      symbolSize: 2,
      lineStyle: {
        width: 2,
      },
      color: '#4282ff',
    },
    {
      name: '2023年',
      data: [2210, 2132, 1801, 1934, 1000, 1330, 1320, 2120, 2200, 1650, 1780, 1670],
      type: 'line',
      radius: '100%',
      smooth: true,
      symbolSize: 2,
      lineStyle: {
        width: 2,
      },
      color: '#37e0cc',
    },
  ],
})

// 电力供电量数据
const dlgdlProviderOptions = reactive({
  title: {
    text: '工业售电量',
    left: 'center',
    top: '5%',
    textStyle: {
      fontSize: 16,
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    orient: 'horizontal',
    bottom: '5%',
    itemGap: 3,
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      fontSize: 12,
    },
    data: ['2024年', '2023年'],
  },
  xAxis: {
    type: 'category',
    data: utils.genMonthArray(),
    axisLabel: {
      fontSize: 12,
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      fontSize: 12,
    },
    name: '万kWh',
    nameLocation: 'end',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)',
      },
    },
  },
  grid: {
    top: '20%',
    left: '6%',
    right: '6%',
    bottom: '15%',
    containLabel: true,
  },
  series: [
    {
      name: '2024年',
      data: [1523, 876, 2134, 945, 1678, 789, 2345, 1234, 987, 1876, 654, 2198],
      type: 'line',
      radius: '100%',
      smooth: true,
      symbolSize: 2,
      lineStyle: {
        width: 2,
      },
      color: '#4282ff',
    },
    {
      name: '2023年',
      data: [2876, 1432, 1987, 2345, 1876, 1987, 1765, 1198, 1654, 1987, 2134, 1567],
      type: 'line',
      radius: '100%',
      smooth: true,
      symbolSize: 2,
      lineStyle: {
        width: 2,
      },
      color: '#37e0cc',
    },
  ],
})

/** 电力售电量性质占比 */
const dlsdlxzzbOptions = reactive({
  title: {
    ...utils.generateChartTitle('电力售电量性质占比'),
    top: '5%',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderColor: 'rgba(255,255,255,0.3)',
    textStyle: {
      fontSize: 14,
    },
  },
  legend: [
    {
      orient: 'vertical', // 垂直排列
      right: '0%', // 图例放在左侧
      top: 'middle', // 垂直居中
      data: ['居民用电', '工业用电', '商业用电', '农业用电', '其他用电'], // 左侧显示前半部分
      itemGap: 8, // 减小图例间距
      itemWidth: 10, // 减小图例标记的宽度
      itemHeight: 10, // 减小图例标记的高度
      textStyle: {
        fontSize: 12, // 减小图例文字大小
      },
      formatter: function (name) {
        const data = [
          { name: '居民用电', total: 1048 },
          { name: '工业用电', total: 735 },
          { name: '商业用电', total: 580 },
          { name: '农业用电', total: 484 },
          { name: '其他用电', total: 300 },
        ]
        const item = data.find((d) => d.name === name)
        if (!item) return ''
        const index = data.indexOf(item) + 1 // 获取序号
        const total = data.reduce((sum, cur) => sum + cur.total, 0)
        const percentage = ((item.total / total) * 100).toFixed(1)
        return `${name} (${item.total}, ${percentage}%)`
      },
    },
  ],
  series: [
    {
      name: '区域占比',
      type: 'pie',
      radius: '50%',
      right: '15%',
      data: [
        { value: 1048, name: '居民用电' },
        { value: 735, name: '工业用电' },
        { value: 580, name: '商业用电' },
        { value: 484, name: '农业用电' },
        { value: 300, name: '其他用电' },
      ],
      label: {
        show: false, // 关闭指示线
      },
      labelLine: {
        show: false, // 关闭指示线
      },
      color: ['#4282ff', '#37e0cc', '#ff7070', '#ffd66b', '#a26cf8'],
    },
  ],
})

/** 燃气用气性质比例 */
function initRqyqxzblChart() {
  const chartDom = document.getElementById('rqyqxzbl')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(rqyqxzblOptions, { notMerge: true })
}

/** 燃气用气量 */
function initRqyqlChart() {
  const chartDom = document.getElementById('rqyql')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(rqyqlOptions, { notMerge: true })
}

/** 燃气用气量 */
function initSyRqyqlChart() {
  const chartDom = document.getElementById('syrqyql')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(syrqyqlOptions, { notMerge: true })
}

/** 电力购电量数据 */
function initDlgdlBuyChart() {
  const chartDom = document.getElementById('dlgdlBuy')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(dlgdlBuyOptions, { notMerge: true })
}

/** 电力供电量数据 */
function initDlgdlProviderChart() {
  const chartDom = document.getElementById('dlgdlProvider')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(dlgdlProviderOptions, { notMerge: true })
}

/** 电力售电量性质占比 */
function initDlsdlxzzbChart() {
  const chartDom = document.getElementById('dlsdlxzzb')
  if (!chartDom) return
  let myChart = echarts.getInstanceByDom(chartDom)
  if (!myChart) {
    myChart = echarts.init(chartDom)
  }
  myChart.setOption(dlsdlxzzbOptions, { notMerge: true })
}

function handleRqClick() {
  rqModalRef.value?.setData({
    params: {
      year: rqygk.year,
      month: rqygk.month,
    },
  })
  rqModalRef.value?.open()
}

function handleDlClick() {
  dlModalRef.value?.setData({
    params: {
      year: dlgk.year,
      month: dlgk.month,
    },
  })
  dlModalRef.value?.open()
}

async function loadDataByRq(isInit = false) {
  if (!isInit) {
    bigScreenStore.showLoading()
  }

  try {
    let year, month
    if (rqygk.year && rqygk.month) {
      year = rqygk.year
      month = rqygk.month
    } else {
      const getNewestDataRes = await Apis.szbt.gasSurvey.get_getNewestData({})
      ;({ year, month } = utils.parseDate(getNewestDataRes.newestDate))
    }

    const getChartDataRes = await Apis.szbt.gasSurvey.get_getChartData({
      params: {
        year: year,
        month: month,
      },
    })
    rqygk.gasSurvey = getChartDataRes.gasSurvey

    rqygk.desc = `截止${year}年${month}月`

    rqygk.year = year.toString()
    rqygk.month = month.toString()

    // const yearArr = getChartDataRes.months.map((item) => {
    //   if (item.year == year) {
    //     return item
    //   }
    // }).filter((item) => item !== undefined)

    // rqygk.yearCount = yearArr.reduce(
    //   (sum, item) => sum + item.gasVolume,
    //   0,
    // )

    // const lastYearArr = getChartDataRes.months.map((item) => {
    //   if (item.year == year - 1) {
    //     return item
    //   }
    // }).filter((item) => item !== undefined)

    // rqygk.lastYearCount = lastYearArr.reduce(
    //   (sum, item) => sum + item.gasVolume,
    //   0,
    // )

    // rqygk.year2yearRate = (
    //   ((rqygk.yearCount - rqygk.lastYearCount) / rqygk.lastYearCount) *
    //   100
    // ).toFixed(2)

    rqygk.gasSurvey.businessUseGasVolume = rqygk.gasSurvey.businessUseGasVolume || 0
    rqygk.gasSurvey.residentUseGasVolume = rqygk.gasSurvey.residentUseGasVolume || 0

    rqygk.gasSurvey.residentUseGasVolumeTb = rqygk.gasSurvey.residentUseGasVolumeTb || '/'
    rqygk.gasSurvey.businessUseGasVolumeTb = rqygk.gasSurvey.businessUseGasVolumeTb || '/'
    rqygk.gasSurvey.supplyGasTotalTb = rqygk.gasSurvey.supplyGasTotalTb || '/'

    rqyqxzblOptions.series[0].data = [
      { value: rqygk.gasSurvey.businessUseGasVolume + '万方', name: '商业用气' },
      { value: rqygk.gasSurvey.residentUseGasVolume + '万方', name: '居民用气' },
    ]

    // ''
    // rqygk.yearUseGasVolume = yearArr.reduce(
    //   (sum, item) => sum + item.yearUseGasVolume,
    //   0,
    // )

    const arr = getChartDataRes.topMap || []
    gasRankingData.value = arr.map((item: any) => ({
      ...item,
      change: item.qnYearUseGasVolume
        ? (
            ((item.yearUseGasVolume || 0 - item.qnYearUseGasVolume || 0) /
              item.qnYearUseGasVolume || 0) * 100
          ).toFixed(2)
        : 0,
    }))

    // rqyqlOptions.series[0].name = year + '年'

    const { groupedData, sortedKeys } = utils.groupAndSortByField(getChartDataRes.months, 'year')

    rqyqlOptions.legend.data = sortedKeys.map((item) => `${item}年`)
    const series = []

    Object.keys(groupedData).forEach((year, index) => {
      series.push({
        name: `${year}年`,
        type: 'line',
        stack: 'Total',
        showSymbol: false,
        smooth: true,
        lineStyle: {
          width: 2,
        },
        symbolSize: 2,
        color: utils.genColors()[index],
        data: groupedData[year].map((item) => {
          return {
            value: item.gasVolume.toFixed(3),
            name: item.month + '月',
          }
        }),
      })
    })

    rqyqlOptions.series = series

    const series1 = []
    syrqyqlOptions.legend.data = sortedKeys.map((item) => `${item}年`)

    Object.keys(groupedData).forEach((year, index) => {
      series1.push({
        name: `${year}年`,
        type: 'line',
        stack: 'Total',
        showSymbol: false,
        smooth: true,
        lineStyle: {
          width: 2,
        },
        symbolSize: 2,
        color: utils.genColors()[index],
        data: groupedData[year].map((item) => {
          return {
            value: item.syGasVolume.toFixed(3),
            name: item.month + '月',
          }
        }),
      })
    })

    syrqyqlOptions.series = series1

    rqygk.gasSurvey.businessUseGasVolume = rqygk.gasSurvey.businessUseGasVolume || 0
    rqygk.gasSurvey.residentUseGasVolume = rqygk.gasSurvey.residentUseGasVolume || 0
    setTimeout(function () {
      const total = rqygk.gasSurvey.businessUseGasVolume + rqygk.gasSurvey.residentUseGasVolume
      let commercialPercent = '0.00'
      let residentialPercent = '0.00'

      if (total > 0) {
        commercialPercent = ((rqygk.gasSurvey.businessUseGasVolume / total) * 100).toFixed(2)
        residentialPercent = (100 - parseFloat(commercialPercent)).toFixed(2)
      } else {
        // 如果总用量为0，则设置两个宽度都为50%
        commercialPercent = '50.00'
        residentialPercent = '50.00'
      }

      const commercialEl = document.querySelector('.commercial')
      const residentialEl = document.querySelector('.residential')

      if (commercialEl) {
        commercialEl.style.width = `${commercialPercent}%`
        rqygk.chart.commercialPercent = commercialPercent
      }
      if (residentialEl) {
        residentialEl.style.width = `${residentialPercent}%`
        rqygk.chart.residentialPercent = residentialPercent
      }
    }, 300)
    initRqyqxzblChart()

    initRqyqlChart()
    initSyRqyqlChart()
  } catch (error) {
  } finally {
    if (!isInit) {
      bigScreenStore.hideLoading()
    }
  }
}

async function loadDataByDl(isInit = false) {
  if (!isInit) {
    bigScreenStore.showLoading()
  }

  try {
    let year, month
    if (dlgk.year && dlgk.month) {
      year = dlgk.year
      month = dlgk.month
    } else {
      const getNewestDataRes = await Apis.szbt.powerSurvey.get_getNewestData({})
      ;({ year, month } = utils.parseDate(getNewestDataRes.newestDate))
    }

    const getChartDataRes = await Apis.szbt.powerSurvey.get_getChartData({
      params: {
        year: year,
        month: month,
      },
    })

    dlgk.survey = getChartDataRes.powerSurvey

    dlgk.desc = `截止${year}年${month}月`

    dlgk.year = year.toString()
    dlgk.month = month.toString()

    const arr = (getChartDataRes.topMap || []).sort(
      (a: any, b: any) => b.yearElectricitySales - a.yearElectricitySales,
    )

    gasRanking2Data.value = arr.map((item: any) => ({
      ...item,
      change: item.qnYearElectricitySales
        ? (
            ((item.yearElectricitySales || 0 - item.qnYearElectricitySales) /
              item.qnYearElectricitySales) *
            100
          ).toFixed(2)
        : 0,
    }))

    let data = [
      { value: dlgk.survey?.residentNum || 0, name: '居民用户数' },
      { value: dlgk.survey?.businessNum || 0, name: '商业用户数' },
      { value: dlgk.survey?.industryNum || 0, name: '工业用户数' },
      { value: dlgk.survey?.agriculturalDrainageNum || 0, name: '农排用户数' },
    ]

    dlsdlxzzbOptions.legend[0].data = data.map((item: any) => item.name)
    dlsdlxzzbOptions.legend[0].formatter = (name: any) => {
      const item = data.find((d) => d.name === name)
      if (!item) return ''
      const index = data.indexOf(item) + 1 // 获取序号
      const total = data.reduce((sum, cur) => sum + cur.value, 0)
      const percentage = total > 0 ? ((item.value / total) * 100).toFixed(1) : 0
      return `${name} (${item.value}, ${percentage}%)`
    }

    dlsdlxzzbOptions.series[0].data = data

    const { groupedData, sortedKeys } = utils.groupAndSortByField(getChartDataRes.months, 'year')

    let series = []

    Object.keys(groupedData).forEach((year, index) => {
      series.push({
        name: `${year}年`,
        type: 'line',
        radius: '100%',
        smooth: true,
        symbolSize: 2,
        lineStyle: {
          width: 2,
        },
        color: utils.genColors()[index],
        data: groupedData[year].map((item) => {
          return {
            value: item.sellingElectricityTotal.toFixed(3),
            name: item.month + '月',
          }
        }),
      })
    })

    dlgdlBuyOptions.legend.data = sortedKeys.map((item) => `${item}年`)
    dlgdlBuyOptions.series = series
    series = []

    Object.keys(groupedData).forEach((year, index) => {
      series.push({
        name: `${year}年`,
        type: 'line',
        radius: '100%',
        smooth: true,
        symbolSize: 2,
        lineStyle: {
          width: 2,
        },
        color: utils.genColors()[index],
        data: groupedData[year].map((item) => {
          return {
            value: item.gyElectricityTotal.toFixed(3),
            name: item.month + '月',
          }
        }),
      })
    })

    dlgdlProviderOptions.legend.data = sortedKeys.map((item) => `${item}年`)
    dlgdlProviderOptions.series = series

    // 用户数
    {
      const barContainer = document.getElementById('barContainer')
      const dataItems = document.getElementById('dataItems')

      // 先移除 dataItems 中的所有元素,避免后续重复创建
      if (dataItems) {
        dataItems.innerHTML = ''
      }

      // 计算总数和百分比
      const total = data.reduce((sum, item) => sum + item.value, 0)

      // 创建bar segments和data items
      data.forEach((item, index) => {
        const percent = total > 0 ? ((item.value / total) * 100).toFixed(1) : 0

        // 创建bar segment
        const segment = document.createElement('div')
        segment.className = `bar-segment bar-segment-${index + 1}`
        segment.style.width = '0%' // 初始宽度为0，后面动画展开

        // 创建tooltip (悬停时显示)
        const tooltip = document.createElement('div')
        tooltip.className = 'bar-tooltip'
        tooltip.textContent = `${item.name}: ${item.value} (${percent}%)`
        segment.appendChild(tooltip)

        // 设置tooltip位置基点
        segment.addEventListener('mousemove', function (e) {
          const segmentRect = segment.getBoundingClientRect()
          const segmentCenter = segmentRect.left + segmentRect.width / 2
          tooltip.style.left = e.clientX - segmentCenter + 'px'
        })

        /*  barContainer.appendChild(segment);*/

        // 创建data item
        const dataItem = document.createElement('div')
        dataItem.className = `data-item data-item-${index + 1}`

        dataItem.innerHTML = `
                    <div class="data-name"><span class="data-color"></span>${item.name}</div>
                    <div class="data-value flex justify-center">${item.value}<div class="data-percent ml-1">${percent}%</div></div>
                `

        /*
        dataItems.appendChild(dataItem);
*/
      })

      // 动画展开segments
      setTimeout(() => {
        const segments = document.querySelectorAll('#barContainer .bar-segment')
        segments.forEach((segment, index) => {
          const percent = total > 0 ? (data[index].value / total) * 100 : 0
          segment.style.width = `${percent}%`
        })
      }, 300)
    }

    // 延时300ms后执行
    await new Promise((resolve) => setTimeout(resolve, 310))

    // 售电量
    {
      data = [
        { value: dlgk.survey?.jmElectricityTotal || 0, name: '居民售电量' },
        { value: dlgk.survey?.syElectricityTotal || 0, name: '商业售电量' },
        { value: dlgk.survey?.gyElectricityTotal || 0, name: '工业售电量' },
        { value: dlgk.survey?.nyElectricityTotal || 0, name: '农排售电量' },
      ]

      const barContainer = document.getElementById('barContainer2')
      const dataItems = document.getElementById('dataItems2')

      // 先移除 dataItems 中的所有元素,避免后续重复创建
      if (dataItems) {
        dataItems.innerHTML = ''
      }

      // 计算总数和百分比
      const total = data.reduce((sum, item) => sum + item.value, 0)

      // 创建bar segments和data items
      data.forEach((item, index) => {
        const percent = total > 0 ? ((item.value / total) * 100).toFixed(1) : 0

        // 创建bar segment
        const segment = document.createElement('div')
        segment.className = `bar-segment bar-segment-${index + 1}`
        segment.style.width = '0%' // 初始宽度为0，后面动画展开

        // 创建tooltip (悬停时显示)
        const tooltip = document.createElement('div')
        tooltip.className = 'bar-tooltip'
        tooltip.textContent = `${item.name}: ${item.value} (${percent}%)`
        segment.appendChild(tooltip)

        // 设置tooltip位置基点
        segment.addEventListener('mousemove', function (e) {
          const segmentRect = segment.getBoundingClientRect()
          const segmentCenter = segmentRect.left + segmentRect.width / 2
          tooltip.style.left = e.clientX - segmentCenter + 'px'
        })

        barContainer.appendChild(segment)

        // 创建data item
        const dataItem = document.createElement('div')
        dataItem.className = `data-item data-item-${index + 1}`

        dataItem.innerHTML = `
              <div class="data-name"><span class="data-color"></span>${item.name}</div>
              <div class="data-value flex justify-center"><div class="data-percent ml-1">${percent}%</div></div>
          `

        dataItems.appendChild(dataItem)
      })

      // 动画展开segments
      setTimeout(() => {
        const segments = document.querySelectorAll('#barContainer2 .bar-segment')
        segments.forEach((segment, index) => {
          const percent = total > 0 ? (data[index].value / total) * 100 : 0
          segment.style.width = `${percent}%`
        })
      }, 300)
    }

    setTimeout(() => {
      initDlgdlProviderChart()

      initDlgdlBuyChart()
    }, 500)

    initDlsdlxzzbChart()
  } catch (error) {
  } finally {
    if (!isInit) {
      bigScreenStore.hideLoading()
    }
  }
}

async function loadData() {
  bigScreenStore.showLoading()

  try {
    await loadDataByRq(true)
    await loadDataByDl(true)
  } catch (error) {
  } finally {
    bigScreenStore.hideLoading()
  }
}

onMounted(async () => {
  await loadData()

  emit('mounted')
  // initLkzlByOptionsChart()
  // initJgkzlByOptionsChart()
  // initCgkzlByOptionsChart()
  // initJnkzlByOptionsChart()
  // initJwkzlByOptionsChart()
})
</script>
<style lang="scss">
div {
  box-sizing: border-box;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条（适用于 Webkit 浏览器，例如 Chrome、Safari） */
}

.no-scrollbar {
  /* 滚动条整体部分 */
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background: transparent;
  }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: linear-gradient(180deg, #00c6fb 0%, #0a2f57 100%);
    box-shadow: inset 0 0 6px rgba(0, 198, 251, 0.3);
  }

  /* 滚动条轨道 */
  &::-webkit-scrollbar-track {
    border-radius: 2px;
    background: rgba(0, 91, 234, 0.1);
  }

  /* 兼容 Firefox */
  scrollbar-width: thin;
  scrollbar-color: #0a2f57 transparent;
}

/* 表格容器 */
.custom-table {
  display: flex;
  flex-direction: column;
  border: 1px solid #aaa;
  /* 边框颜色：灰色 */
  border-radius: 4px;
  /* 圆角 */
  overflow: hidden;
  /* 防止内容溢出 */
  /* background-color: #ffffff; */
  /* 白色背景 */
}

/* 表头样式 */
.custom-table-header {
  display: flex;
  /* background-color: #f3f4f6; */
  /* 浅灰背景 */
  font-weight: bold;
  border-bottom: 1px solid #aaa;
  /* 表头底部边框 */
}

/* 表行样式 */
.custom-table-row {
  display: flex;
  border-bottom: 1px solid #aaa;
  /* 行的底部边框 */
  transition: background-color 0.2s;
  /* 悬浮时的过渡效果 */
}

.custom-table-row:last-child {
  border-bottom: none;
  /* 最后一行没有边框 */
}

/* 单元格样式 */
.custom-table-cell {
  flex: 1;
  text-align: center;
  color: #eee;
  height: 40px;
  border-right: 1px solid #aaa;
  /* 单元格分隔线 */
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  white-space: nowrap;
  /* 防止文字换行 */
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
}

.custom-table-cell:last-child {
  border-right: none;
  /* 最后一列没有分隔线 */
}

/* 行悬浮效果 */

.custom-table-row:hover {
  /* background-color: #f9fafb; */
  /* 悬浮时背景变浅灰 */
}

/* 表头悬浮效果 */
.custom-table-header .custom-table-cell {
  /* background-color: #e5e7eb; */
  /* 表头固定时背景色 */
  font-size: 14px;
  /* 表头文字大小 */
}

.gas-usage {
  display: flex;
  flex: 1;
  min-width: 670px;
  position: relative;
  padding: 0px 100px;
  margin-top: 24px;
}

.usage-item {
  height: 100%;
  color: white;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.commercial {
  width: 15.1%;
  min-width: 120px;
  background: #d3adf7;
  /* 深蓝色，接近主题色 */
  border-radius: 6px 0 0 6px;
  z-index: 2;
}

.residential {
  width: 84.9%;
  min-width: 120px;
  background: #fce74e;
  /* 深青色，接近主题色 */
  border-radius: 0 6px 6px 0;
}

.usage-content {
  padding: 15px 10px;
  width: 100%;
  z-index: 5;
}

.usage-type {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.usage-number {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.usage-percentage {
  font-size: 16px;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-block;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.legend {
  display: flex;
  justify-content: center;
  font-size: 14px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 0 15px;
}

.legend-color {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-right: 5px;
}

.commercial-color {
  background: #d3adf7;
}

.residential-color {
  background: #fce74e;
}

/* 发光效果 */
@keyframes glow {
  0% {
    box-shadow: 0 0 3px rgba(66, 130, 255, 0.5);
  }

  50% {
    box-shadow: 0 0 8px rgba(66, 130, 255, 0.8);
  }

  100% {
    box-shadow: 0 0 3px rgba(66, 130, 255, 0.5);
  }
}

@keyframes glow2 {
  0% {
    box-shadow: 0 0 3px rgba(55, 224, 204, 0.5);
  }

  50% {
    box-shadow: 0 0 8px rgba(55, 224, 204, 0.8);
  }

  100% {
    box-shadow: 0 0 3px rgba(55, 224, 204, 0.5);
  }
}

.bar-chart {
  // height: 220px;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 85%;
  margin: 0 auto;
  margin-top: 12px;
}

.bar-container {
  display: flex;
  height: 32px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  margin-bottom: 5px;
  overflow: hidden;
  position: relative;
}

.bar-segment {
  height: 100%;
  transition: all 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  min-width: 0;
  position: relative;
}

.bar-segment:first-child {
  border-radius: 16px 0 0 16px;
}

.bar-segment:last-child {
  border-radius: 0 16px 16px 0;
}

.bar-segment:only-child {
  border-radius: 16px;
}

.bar-segment-1 {
  background-color: #e34141;
}

.bar-segment-2 {
  background-color: #952ad8;
}

.bar-segment-3 {
  background-color: #ffda98;
}

.bar-segment-4 {
  background-color: #d83d6c;
}

.bar-segment-5 {
  background-color: #7ce02a;
}

.bar-tooltip {
  position: absolute;
  top: -24px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 10;
}

.bar-segment:hover .bar-tooltip {
  opacity: 1;
}

.data-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
  gap: 12px;
  /* 添加间距，类似space效果 */
  padding: 0 8px;
  /* 两侧留出一些边距 */
}

.data-item {
  width: calc(20% - 8px);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
  margin-bottom: 8px;
  position: relative;
  transition: all 0.3s;
}

.data-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.data-color {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.data-name {
  font-size: 11px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-value {
  font-size: 16px;
  font-weight: bold;
  // color: #ffffff;
}

.data-percent {
  font-size: 16px;
  font-weight: bold;
  // color: #ffffff;
}

.data-item-1 .data-color {
  background-color: #e34141;
}

.data-item-2 .data-color {
  background-color: #952ad8;
}

.data-item-3 .data-color {
  background-color: #ffda98;
}

.data-item-4 .data-color {
  background-color: #d83d6c;
}

.data-item-5 .data-color {
  background-color: #7ce02a;
}
#dataItems2 {
  .data-item {
    margin: 0 5px;
  }
}
.text-md {
  color: #999;
}
.unit {
  font-size: 12px;
  color: #999999;
  margin-left: 5px;
}
.valueNum-zf {
  color: #00bcc3;
}
.a-row-box {
  min-height: calc(100vh - 220px) !important;
}
</style>
